<template>
  <div>count：{{ count }}</div>
  <button @click="add({ amount: 10 })">click add me</button>
  <button @click="decrement">click decrement me</button>
</template>

<script>
import { mapState, mapActions } from 'vuex'
export default {
  computed: {
    ...mapState([
      'count'
    ])
  },
  methods: {
    // add () {
    //   // 以载荷形式分发
    //   // this.$store.dispatch('increment', {
    //   //   amount: 10
    //   // })
    //   // 以对象形式分发
    //   this.$store.dispatch({
    //     type: 'increment',
    //     amount: 10
    //   })
    // }
    // ...mapActions({
    //   add: 'increment' // 将 `this.add()` 映射为 `this.$store.dispatch('increment')`
    // })
    // ...mapActions([
    //   'increment' // 将 `this.increment()` 映射为 `this.$store.dispatch('increment')`
    //   // mapActions 也支持载荷
    //   // 'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.dispatch('increment', amount)`
    // ])
    add () {
      // 组合 Action 可以处理 action的处理函数返回的 Promise
      this.$store.dispatch('increment', { amount: 5 }).then(() => {
        console.log('我进来了')
      })
    },
    ...mapActions([
      'decrement'
    ])
  }
}
</script>

<style>

</style>